<template>
  <div class="content">
    <headline v-bind:title="title"></headline>
    <div class="data-table">
      <el-table
        :data="queryList.data"
        border
        style="width: 100%"
        max-height="500"
      >
        <el-table-column prop="id" label="ID" style="width: 20%">
        </el-table-column>
        <el-table-column prop="username" label="用户名" style="width: 20%">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" style="width: 20%">
        </el-table-column>
        <el-table-column prop="phone" label="电话" style="width: 20%">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="注册时间"
          style="width: 20%"
          :formatter="dateFormat"
        >
        </el-table-column>
      </el-table>
    </div>
    <paging v-bind:queryList="queryList"></paging>
  </div>
</template>
<script>
import moment from "moment";
import headline from "./headline.vue";
import paging from "./paging.vue";

export default {
  components: { headline, paging },
  data() {
    return {
      title: "用户管理",
      queryList: { data: [], total: 0, pageNum: 1, pageSize: 10 },
    };
  },
  mounted() {
    this.biaoge();
  },
  methods: {
    handleSizeChange(val) {
      this.queryList.pageSize = val;
      this.biaoge();
    },
    handleCurrentChange(val) {
      this.queryList.pageNum = val;
      this.biaoge();
    },
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    biaoge() {
      let postData = this.qs.stringify({
        pageSize: this.queryList.pageSize,
        pageNum: this.queryList.pageNum,
      });
      this.axios({
        method: "POST",
        url: "/api/manage/user/list.do",
        data: postData,
      }).then((res) => {
        this.queryList.data = res.data.data.list;
        this.queryList.total = res.data.data.total;
      });
    },
  },
};
</script>